// 复合题型
import React, { useState, useContext } from "react";
import QuestionnaireContext from "../../context/questionnaire/QuestionnaireContext";
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Modal,
  TouchableWithoutFeedback,
  Alert,
} from "react-native";
import ShowChoiceQues from "../../components/showSubject/showChoiceQues";
import ShowEssayQues from "../../components/showSubject/ShowEssayQues";
import ShowCompletion from "../../components/showSubject/ShowCompletion";
import { AntDesign } from "@expo/vector-icons";

const ComplexQues = ({ navigation, route }) => {
  const { type, isAdd, onDelete, quesIndex, showQues } = route.params;

  // 题型Modal
  const [isVisible, setIsVisible] = useState(false);

  // 复合题型题目数组
  let t_ques = {};
  if (quesIndex == -1) {
    t_ques = [];
  } else {
    t_ques = showQues.title;
  }
  const [quesArr, setQuesArr] = useState(t_ques);

  //添加题目
  const onSubmit = async (index, question) => {
    await setQuesArr((preQuesArr) => {
      return [...preQuesArr, question];
    });
  };

  // 编辑题目
  const editQues = (quesIndex, question) => {
    setQuesArr((preQuesArr) => {
      return preQuesArr.map((item, index) => {
        return index == quesIndex ? question : item;
      });
    });
  };

  // 删除题目
  const deleteQues = (index) => {
    setQuesArr((preQuesArr) => {
      return preQuesArr.filter((item, quesIndex) => index !== quesIndex);
    });
  };

  React.useLayoutEffect(() => {
    if (!isAdd) {
      navigation.setOptions({
        title: "修改题目",
        headerRight: () => (
          <TouchableOpacity
            onPress={() => {
              onConfirmeDeleted();
            }}
          >
            <AntDesign
              name="delete"
              size={20}
              color="#fff"
              style={{ marginRight: 5 }}
            />
          </TouchableOpacity>
        ),
      });
    }
  }, [navigation]);
  // 删除复合题型
  const onConfirmeDeleted = () => {
    Alert.alert("提示", "确定删除第" + (quesIndex + 1) + "题吗?", [
      {
        text: "确定",
        onPress: () => {
          route.params.onDelete(quesIndex);
          navigation.goBack();
        },
      },
      {
        text: "取消",
      },
    ]);
  };

  return (
    <View style={styles.container}>
      <View style={{ flex: 10 }}>
        <ScrollView>
          <View>
            {quesArr.map((question, index) => {
              // console.log("复合题型呢", quesArr);
              if (question.type == 1 || question.type == 7) {
                return (
                  <View key={index}>
                    <TouchableOpacity
                      onPress={() => {
                        navigation.navigate("添加题目", {
                          onSubmit: editQues,
                          type: 1,
                          onDelete: deleteQues,
                          isAdd: false,
                          quesIndex: index,
                          showQues: quesArr[index],
                        });
                      }}
                    >
                      <ShowEssayQues
                        isEdit={false}
                        number=""
                        QuesContent={question}
                      ></ShowEssayQues>
                    </TouchableOpacity>
                  </View>
                );
              }
              if (question.type == 2 || question.type == 3) {
                return (
                  <View key={index}>
                    <TouchableOpacity
                      onPress={() => {
                        navigation.navigate("添加题目", {
                          onSubmit: editQues,
                          onDelete: deleteQues,
                          isAdd: false,
                          type: 2,
                          quesIndex: index,
                          showQues: quesArr[index],
                        });
                      }}
                    >
                      <ShowChoiceQues
                        isEdit={false}
                        number=""
                        QuesContent={question}
                      ></ShowChoiceQues>
                    </TouchableOpacity>
                  </View>
                );
              }
              if (question.type == 4) {
                return (
                  <View key={index}>
                    <TouchableOpacity
                      onPress={() => {
                        navigation.navigate("添加题目", {
                          onSubmit: editQues,
                          onDelete: deleteQues,
                          isAdd: false,
                          type: 4,
                          quesIndex: index,
                          showQues: quesArr[index],
                        });
                      }}
                    >
                      <ShowCompletion
                        isEdit={false}
                        number=""
                        QuesContent={question}
                      ></ShowCompletion>
                    </TouchableOpacity>
                  </View>
                );
              }
            })}
            {/* <View style={{ borderBottomWidth: 5, borderColor: "#eee" }}></View> */}
          </View>
        </ScrollView>
      </View>
      <View style={{ flex: 1 }}>
        <View style={styles.btnBox}>
          <TouchableOpacity
            style={styles.backBtn}
            onPress={() => setIsVisible(true)}
          >
            <Text style={{ color: "#41C3EE" }}>添加题目</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.submitBtn}
            onPress={() => {
              navigation.goBack();
              route.params.onSubmit(quesIndex, {
                type: 5,
                title: quesArr,
                visible: true,
              });
            }}
          >
            <Text style={{ color: "#fff" }}>确认</Text>
          </TouchableOpacity>
        </View>
      </View>
      <Modal animationType="fade" transparent={true} visible={isVisible}>
        <View style={styles.ModalBackground}></View>
        <TouchableWithoutFeedback
          onPress={() => {
            setIsVisible(false);
          }}
        >
          <View style={styles.ModalTop}></View>
        </TouchableWithoutFeedback>
        <View style={styles.ModalStyle}>
          <TouchableOpacity
            style={styles.modalOption}
            onPress={() => {
              // console.log("问答题");
              navigation.navigate("添加题目", {
                onSubmit: onSubmit,
                type: 1,
                quesIndex: -1,
              });
            }}
          >
            <Text style={styles.modalText}>问答题</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.modalOption}
            onPress={() => {
              // console.log("单选题");
              navigation.navigate("添加题目", {
                onSubmit: onSubmit,
                type: 2,
                quesIndex: -1,
              });
            }}
          >
            <Text style={styles.modalText}>单选题</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.modalOption}
            onPress={() => {
              // console.log("多选题");
              navigation.navigate("添加题目", {
                onSubmit: onSubmit,
                type: 3,
                quesIndex: -1,
              });
            }}
          >
            <Text style={styles.modalText}>多选题</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.modalOption}
            onPress={() => {
              navigation.navigate("添加题目", {
                onSubmit: onSubmit,
                type: 4,
                quesIndex: -1,
              });
            }}
          >
            <Text style={styles.modalText}>填空题</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.modalOption}
            onPress={() => {
              setIsVisible(false);
            }}
          >
            <Text style={styles.modalText}>取消</Text>
          </TouchableOpacity>
        </View>
      </Modal>
    </View>
  );
};

var styles = StyleSheet.create({
  container: {
    // marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    height: "100%",
    backgroundColor: "white",
  },
  ModalBackground: {
    backgroundColor: "#727272",
    opacity: 0.3,
    zIndex: 0,
    position: "absolute",
    width: "100%",
    height: "100%",
  },
  ModalStyle: {
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    backgroundColor: "#ffffff",
    zIndex: 1,
    position: "relative",
  },
  ModalTop: {
    flex: 1,
  },
  modalOption: {
    // backgroundColor: "yellow",
    width: "100%",
    padding: 15,
    borderBottomWidth: 0.5,
    borderBottomColor: "#e6e6e6",
  },
  modalText: {
    alignSelf: "center",
    fontSize: 16,
    color: "#201D1D",
  },
  inputBox: {
    marginTop: 5,
    marginBottom: 10,
    marginLeft: 40,
    marginRight: 40,
    borderColor: "#ddd",
    borderBottomWidth: 1,
    // height: 100,
    borderRadius: 3,
    padding: 10,
    paddingTop: 15,
    paddingBottom: 10,
  },
  backBtn: {
    flex: 5,
    borderWidth: 1,
    borderColor: "#41C3EE",
    // alignContent: "center",
    // justifyContent: "center",
    alignItems: "center",
    padding: 10,
    borderRadius: 5,
  },
  submitBtn: {
    flex: 3.5,
    marginLeft: "6%",
    backgroundColor: "#41C3EE",
    alignItems: "center",
    padding: 10,
    borderRadius: 5,
  },
  btnBox: {
    flexDirection: "row",
    marginLeft: "5%",
    marginRight: "5%",
    marginTop: 8,
  },
});

export default ComplexQues;
